<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax演示</title>
<script>
  function initialized() {
    if (!window.XMLHttpRequest) {
      window.alert("你的浏览器不支持XMLHttpRequest");
      document.forms[0][0].disabled = true;
    }
  }
</script>
</head>
<body onload="initialized()">
  <fieldset>
    <legend>注册</legend>
    <form method="post">
      <input type="text" name="field" placeholder="10个字符以内" onblur="inquire(this.value)">
      <input type="button" value="注册" disabled="disabled" onclick="register(document.forms[0][0].value)">
      <span id="message"></span>
    </form>
    <script>
      var message = document.getElementById("message");
      function inquire(val) {
        if (verify(val) === -1)
          return;
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "server", false);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send("read=" + document.forms[0].field.value);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var button = document.forms[0][1];
            if (xhr.responseText === "0") {
              message.style.color = "green";
              button.disabled = false;
            } else {
              message.style.color = "red";
              button.disabled = true;
            }
            switch (xhr.responseText) {
            case "0":
              message.innerText = "此字段可用";
              break;
            case "1":
              message.innerText = "此字段已被注册";
              break;
            case "-1":
              message.innerHTML = "服务器可能遇到问题或<b>参数以UTF-8编码转化为字节数组的长度大于10</b>";
            }
          }
        }()
      }
      function register(val) {
        if (verify(val) === -1)
          return;
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "server", false);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send("write=" + document.forms[0].field.value);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            message.style.color = xhr.responseText === "1" ? "green" : "red";
            document.forms[0][1].disabled = true;
            switch (xhr.responseText) {
            case "0":
              message.innerText = "此字段已被注册";
              break;
            case "1":
              message.innerText = "注册成功";
              break;
            case "-1":
              message.innerHTML = "服务器可能遇到问题或<b>参数以UTF-8编码转化为字节数组的长度大于10</b>";
            }
          }
        }()
      }
      function verify(param) {
        var button = document.forms[0][1];
        if (param === null || param === '') {
          message.style.color = "red";
          message.innerText = "字段为空";
          button.disabled = true;
          return -1;
        }
        if (param.length > 10) {
          message.style.color = "red";
          message.innerText = "参数的长度大于10";
          button.disabled = true;
          return -1;
        }
      }
    </script>
  </fieldset>
</body>
</html>
